<template>
  <div id="app" class="home">
    <!-- banner -->
    <div class="home-banner">
      <div class="banner-container">
        <h1 class="blog-title animated zoomIn">
          首页
        </h1>
        <!-- 向下滚动 -->
        <div class="scroll-down" @click="scrollDown">
          <h4>向下滚动<i class="el-icon-arrow-down"></i></h4>
        </div>
      </div>
      <!--中间内容,如果太窄了可放到container    <div  class="m-container m-padded-tb-big">-->
    </div>
    <TopNavBar></TopNavBar>
    <div class="m-home">
      <div class="ui container">

        <div class="ui stackable grid">

          <!--左边博客列表-->
          <div class="eleven wide column">
            <!--header-->
            <div class="ui top attached segment">
              <div class="ui middle aligned two column grid my-shadow">
                <div class="column">
                  <h3 class="ui my-blue header" >博客</h3>
                </div>
                <div class="right aligned column"><h4 class="ui header m-inline-block m-text" v-if="pagination.queryString!=='' && pagination.queryString!==null" style="height: 1px !important;">根据"{{pagination.queryString}}"的搜索结果</h4>
                  共 <h2 class="ui orange header m-inline-block m-text-thin">{{pagination.total}}</h2> 篇
                </div>
              </div>
            </div>

            <!--content-->
            <div class="ui attached  segment my-blog-shadow">
              <div class="ui padded vertical segment m-padded-tb-large" v-for="item in dataList" :key="item.blogId">
                <div class="ui middle aligned mobile reversed stackable grid">
                  <div class="eleven wide column" style="cursor:pointer;">
                    <h3 class="ui header" @click="toBlog(item.blogId)">{{item.title}}</h3>
                    <p class="m-text" @click="toBlog(item.blogId)">{{item.description}}</p>'
                    <div class="ui grid">
                      <div class="eleven wide column">
                        <div class="ui mini horizontal link list">
                          <div class="item">
                            <img v-bind:src=item.user.avatar class="ui avatar image">
                            <div class="content"><a class="header">{{item.user.username}}</a></div>
                          </div>
                          <div class="item">
                            <i class="calendar icon"></i> {{item.createTime}}
                          </div>
                          <div class="item">
                            <i class="eye icon"></i> {{item.views}}
                          </div>
                          <div class="item">
                            <i class="thumbs up outline icon"></i> {{item.thumbs}}
                          </div>
                        </div>
                      </div>
                      <div class="right aligned five wide column">
                        <a target="_blank" class="ui my-blue basic label m-padded-tiny m-text-thin">{{item.type.typeName}}</a>
                      </div>
                    </div>
                  </div>
                  <div class="five wide column">
                    <a target="_blank">
                      <img v-bind:src=item.firstPicture @click="toBlog(item.blogId)" alt="" class="ui rounded image">
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!--footer-->
            <div class="ui bottom attached segment my-blog-shadow">
              <div class="pagination-container">
                <el-pagination
                  class="pagiantion"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.currentPage"
                  :page-sizes="[2,6,10,15]"
                  :page-size="pagination.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total">
                </el-pagination>
              </div>
            </div>

          </div>

          <!--右边的top-->
          <div class="five wide column" style="left: 34px !important;">

            <!--分类-->
            <div class="ui segments my-shadow">
              <div class="ui secondary segment">
                <div class="ui two column grid">
                  <div class="column">
                    <i class="idea icon"></i>分类
                  </div>
                  <div class="right aligned column">
                    <a href="/types" target="_blank">more <i class="angle double right icon"></i></a>
                  </div>
                </div>
              </div>
              <div class="ui my-blue segment">
                <div class="ui fluid vertical menu">
                  <template v-for="(item, index) in typeList">
                    <a class="item" v-if='index<6' :key="item.typeId" @click="toType(item.typeId,item.count)">
                      {{ item.typeName }}
                      <div class="ui blue basic left pointing label">{{item.count}}</div>
                    </a>
                  </template>
                </div>
              </div>
            </div>

            <!--标签-->
            <div class="ui segments m-margin-top-large my-shadow">
              <div class="ui secondary segment">
                <div class="ui two column grid">
                  <div class="column">
                    <i class="tags icon"></i>标签
                  </div>
                  <div class="right aligned column">
                    <a href="/tags" target="_blank">more <i class="angle double right icon"></i></a>
                  </div>
                </div>
              </div>
              <div class="ui my-blue segment">
                <template v-for="(item, index) in tagList">
                  <a target="_blank" class="ui my-blue basic left pointing label m-margin-tb-tiny" v-if='index<15' :key="item.tagId" @click="toTag(item.tagId,item.count)">
                    {{item.tagName}} <div class="detail">{{item.count}}</div>
                  </a>
                </template>
              </div>
            </div>

            <!--最新推荐-->
            <div class="ui segments m-margin-top-large my-shadow">
              <div class="ui secondary segment">
                <i class="bookmark icon"></i>最新推荐
              </div>
              <div class="ui segment" v-for="item in latestList" :key="item.blogId">
                <a  target="_blank" class="m-black m-text-thin" style="cursor:pointer;" v-text="item.title" @click="toBlog(item.blogId)"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br>
    <br>
    <Footer></Footer>
  </div>

</template>

<script>
// import Vue from '../../node_modules/vue'
// import { Notification } from 'element-ui'
import ribbon from '../assets/js/ribbon'
import Footer from '../components/layout/Footer'
import TopNavBar from '../components/layout/TopNavBar'
import { Notification } from 'element-ui'
export default {
  // 注册组件
  components: {
    Footer,
    TopNavBar,
  },
  data() {
    return {
      // 当前页要展示的博客分页列表数据
      dataList: [],
      // 分类列表的数据
      typeList: [],
      // 标签列表的数据
      tagList: [],
      // 最新发布的博客列表的数据
      latestList: [],
      // 分页相关模型数据
      pagination: {
        currentPage: 1, // 当前页
        pageSize: 6, // 页大小
        total: 0, // 总记录数
        queryString: null // 查询条件
      },
    }
  },
  methods: {
    // 初始化
    scrollDown () {
      window.scrollTo({
        behavior: 'smooth',
        top: document.documentElement.clientHeight
      })
    },
    // 分页异步方法
    async findPage() {
      const _this = this;
      this.$http.get("/service-blog/blog/queryAll/type/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then(res => {
        console.log(res.data.blogList);
        _this.dataList = res.data.blogList
        _this.pagination.total = res.data.blogCount
      })
    },
    // 分类异步方法
    async getTypeList() {
      const _this = this;
      this.$http.get("/service-blog/blog/type/queryAll").then(res => {
        console.log(res.data.typeList);
        _this.typeList = res.data.typeList
      })
    },
    // 标签异步方法
    async getTagList() {
      const _this = this;
      this.$http.get("/service-blog/blog/tag/queryAll").then(res => {
        console.log(res.data.tagList);
        _this.tagList = res.data.tagList
      })
    },
    // 最新推荐异步方法
    async getLatestList () {
      const _this = this;
      this.$http.get("/service-blog/blog/queryAll/Recommend").then(res => {
        console.log(res.data.RecommendBlogList);
        _this.latestList = res.data.RecommendBlogList
      })
    },
    // queryAll/Recommend
    handleSizeChange(newSize) {
      console.log(`每页 ${newSize} 条`);
      this.pagination.pageSize = newSize
      // 重新调用findPage方法进行分页查询
      this.findPage()
    },
    handleCurrentChange(currentPage) {
      // 设置最新的页码
      this.pagination.currentPage = currentPage
      // 重新调用findPage方法进行分页查询
      this.findPage()
      console.log(`当前页: ${currentPage}`);
    },
    // 博客详情数据显示
    toBlog(blogId){
      sessionStorage.setItem('blogId', blogId)
      this.$router.push({ path: "/blog/" + blogId });
    },
    //博客标签分类显示
    toTag(tagId,count){
      if(count!=0){
        this.$router.push({ path: '/tags', query: { tagId: tagId }})
      }else{
        this.$message.error('查询失败，当前查询标签分类的博客数为0')
      }
    },
    //博客分类显示
    toType(typeId,count){
      if(count!=0){
        this.$router.push({ path: '/types', query: { typeId: typeId }})
      }else{
        this.$message.error('查询失败，当前查询分类的博客数为0')
      }
    },message() {
      const messageFlag = sessionStorage.getItem('messageFlag')
      if (messageFlag == null) {
        Notification({
          title: '消息',
          message: '在本站中各位可以创建用户发布博客、评论、留言等进行测试，但是没有实际意义的博客会被站主删除，望各位知悉',
          duration: 0
        })
        const h = this.$createElement
        Notification({
          title: '通知',
          message: h('i', { style: 'color: teal;' }, '此次更新管理员的系统后台，完善了权限功能！'),
          duration: 0,
          position: "top-left",

        })
      }
      sessionStorage.setItem('messageFlag', 'true')
    }
    },created() {
    this.message()
    this.findPage()
    this.getTypeList()
    this.getTagList()
    this.getLatestList()
  }
}
</script>
<style>
  /* *{
    cursor: url('../assets/images/KobeLogo.png'), default;
  } */
  .home-banner {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    height: 100vh;
    background: url("../assets/images/psc2.jpg") center center /
    cover no-repeat;
    background-color: #49b1f5;
    background-attachment: fixed;
    text-align: center;
    color: #fff !important;
    animation: header-effect 1s !important;
  }
  .banner-container {
    margin-top: 43vh;
    line-height: 1.5;
    color: #eee;
  }
  .scroll-down {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .scroll-down i {
    font-size: 2rem;
  }
  .m-home {
    padding-top: 105vh !important;
    padding-bottom: 0px !important;
  }
  .home-bg{
    width: 100%;
    height: 100%;
    background: #3E3E3E;
  }
  #particles-js{
    width: 100%;
    height: 1000px;
    position: absolute;
  }
  /* -------------下方的样式未使用------------- */

  /* .blog-contact a {
    color: #fff !important;
  }
  .card-info-social {
    line-height: 40px;
    text-align: center;
    font-size: 1.5rem;
    margin: 6px 0 -6px;
  }
  .left-radius {
    border-radius: 8px 0 0 8px !important;
    order: 0;
  }
  .right-radius {
    border-radius: 0 8px 8px 0 !important;
    order: 1;
  }
  .article-wrapper {
    font-size: 14px;
  }
  @media (min-width: 760px) {
    .blog-title {
      font-size: 2.5rem;
    }
    .blog-intro {
      font-size: 1.5rem;
    }
    .blog-contact {
      line-height: 40px;
      text-align: center;
      font-size: 1.5rem;
      margin: 6px 0 -6px;
    }
    .home-container {
      max-width: 1200px;
      margin: calc(100vh - 50px) auto 0 auto;
      padding: 0 3px;
    }
    .article-card {
      display: flex;
      align-items: center;
      height: 280px;
      width: 100%;
      margin-top: 20px;
    }
    .article-cover {
      overflow: hidden;
      height: 100%;
      width: 45%;
    }
    .on-hover {
      transition: all 0.6s;
    }
    .article-card:hover .on-hover {
      transform: scale(1.1);
    }
    .article-wrapper {
      padding: 0 2.5rem;
      width: 55%;
    }
    .article-wrapper a {
      font-size: 1.5rem;
      transition: all 0.3s;
    }
  }
  @media (max-width: 759px) {
    .blog-title {
      font-size: 24px;
    }
    .blog-contact {
      font-size: 1.25rem;
      line-height: 2;
    }
    .home-container {
      width: 100%;
      margin: calc(100vh - 66px) auto 0 auto;
    }
    .article-card {
      margin-top: 1rem;
    }
    .article-cover {
      border-radius: 8px 8px 0 0 !important;
      height: 230px !important;
      width: 100%;
    }
    .article-cover div {
      border-radius: 8px 8px 0 0 !important;
    }
    .article-wrapper {
      padding: 1.25rem 1.25rem 1.875rem;
    }
    .article-wrapper a {
      font-size: 1.25rem;
      transition: all 0.3s;
    }
  }

  .article-wrapper a:hover {
    color: #8e8cd8;
  }
  .article-info {
    font-size: 95%;
    color: #858585;
    line-height: 2;
    margin: 0.375rem 0;
  }
  .article-info a {
    font-size: 95%;
    color: #858585 !important;
  }
  .article-content {
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .blog-wrapper {
    position: sticky;
    top: 10px;
  }
  .blog-card {
    line-height: 2;
    padding: 1.25rem 1.5rem;
  }
  .author-wrapper {
    text-align: center;
  }
  .blog-info-wrapper {
    display: flex;
    justify-self: center;
    padding: 0.875rem 0;
  }
  .blog-info-data {
    flex: 1;
    text-align: center;
  }
  .blog-info-data a {
    text-decoration: none;
  }
  .collection-btn {
    text-align: center;
    z-index: 1;
    font-size: 14px;
    position: relative;
    display: block;
    background-color: #49b1f5;
    color: #fff !important;
    height: 32px;
    line-height: 32px;
    transition-duration: 1s;
    transition-property: color;
  }
  .collection-btn:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #ff7242;
    content: "";
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
    transition-property: transform;
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  .collection-btn:hover:before {
    transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
    transform: scaleX(1);
  }
  .author-avatar {
    transition: all 0.5s;
  }
  .author-avatar:hover {
    transform: rotate(360deg);
  }
  .web-info {
    padding: 0.25rem;
    font-size: 0.875rem;
  }
  .scroll-down-effects {
    color: #eee !important;
    text-align: center;
    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
    line-height: 1.5;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: scroll-down-effect 1.5s infinite;
  }
  @keyframes scroll-down-effect {
    0% {
      top: 0;
      opacity: 0.4;
      filter: alpha(opacity=40);
    }
    50% {
      top: -16px;
      opacity: 1;
      filter: none;
    }
    100% {
      top: 0;
      opacity: 0.4;
      filter: alpha(opacity=40);
    }
  }
  .big i {
    color: #f00;
    animation: big 0.8s linear infinite;
  }
  @keyframes big {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  } */



/* ------------------------勿删------------------------ */
.m-home[data-v-ed69adf6] {
    padding-top: 105vh!important;
    padding-bottom: 0!important;
}
.ui.container {
    width: 1127px;
    margin-left: auto!important;
    margin-right: auto!important;
}
.ui.container {
    display: block;
    max-width: 100%!important;
}
.ui.segment[class*="top attached"]:first-child {
    margin-top: 0;
}
.ui[class*="top attached"].segment {
    bottom: 0;
    margin-bottom: 0;
    top: 0;
    margin-top: 1rem;
    border-radius: 0.28571429rem 0.28571429rem 0 0;
}
.ui[class*="two column"].grid>.column:not(.row), .ui[class*="two column"].grid>.row>.column {
    width: 50%;
}
.ui.orange.header {
    color: #f2711c!important;
}
.ui.header:last-child {
    margin-bottom: 0;
}
h2.ui.header {
    font-size: 1.71428571rem;
}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child {
    margin-bottom: 0;
}
.m-inline-block {
    display: inline-block!important;
}
h2 {
    font-size: 1.71428571rem;
}
h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.ui.padded.segment.vertical.segment, .ui[class*="very padded"].vertical.segment {
    padding-left: 0;
    padding-right: 0;
}
.ui.padded.segment {
    padding: 1.5em;
}
.ui.vertical.segment {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    background: none transparent;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid rgba(34,36,38,.15);
}
.m-padded-tb-large {
    padding-top: 2em!important;
    padding-bottom: 2em!important;
}
.ui.header:first-child {
    margin-top: -0.14285714em;
}
.ui.header {
    border: none;
    margin: calc(2rem - 0.14285714em) 0 1rem;
    padding: 0 0;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    font-weight: 700;
    line-height: 1.28571429em;
    text-transform: none;
    color: rgba(0,0,0,.87);
}
h3.ui.header {
    font-size: 1.28571429rem;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child {
    margin-top: 0;
}
h3 {
    font-size: 1.28571429rem;
}
h1, h2, h3, h4, h5 {
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    line-height: 1.28571429em;
    margin: calc(2rem - 0.14285714em) 0 1rem;
    font-weight: 700;
    padding: 0;
}
h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.ui.header+p {
    margin-top: 0;
}
.m-text {
    letter-spacing: 1px!important;
    line-height: 1.8;
}
p {
    margin-bottom: 20px!important;
}
p {
    margin: 0 0 1em;
    line-height: 1.4285em;
}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.ui.grid {
    margin-top: -1rem;
    margin-bottom: -1rem;
    margin-left: -1rem;
    margin-right: -1rem;
}
.ui.grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0;
}
.ui.column.grid>[class*="eleven wide"].column, .ui.grid>.column.row>[class*="eleven wide"].column, .ui.grid>.row>[class*="eleven wide"].column, .ui.grid>[class*="eleven wide"].column {
    width: 68.75%!important;
}
.ui.mini.list {
    font-size: .78571429em;
}
.ui.horizontal.list {
    display: inline-block;
    font-size: 0;
}
.ui.list:last-child, ol.ui.list:last-child, ul.ui.list:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.ui.list:first-child, ol.ui.list:first-child, ul.ui.list:first-child {
    margin-top: 0;
    padding-top: 0;
}
.ui.list {
    font-size: 1em;
}
.ui.list, ol.ui.list, ul.ui.list {
    list-style-type: none;
    margin: 1em 0;
    padding: 0 0;
}
.ui.horizontal.list:not(.celled)>.item:first-child {
    margin-left: 0!important;
    padding-left: 0!important;
}
.ui.horizontal.list>.item:first-child, .ui.horizontal.list>.item:last-child {
    padding-top: 0.21428571em;
    padding-bottom: 0.21428571em;
}
.ui.list .list>.item:first-child, .ui.list>.item:first-child, ol.ui.list li:first-child, ul.ui.list li:first-child {
    padding-top: 0;
}
.ui.list .list>.item>.image:only-child, .ui.list .list>.item>img.image, .ui.list>.item>.image:only-child, .ui.list>.item>img.image {
    display: inline-block;
}
.ui.list .list>.item>.image, .ui.list>.item>.image {
    display: table-cell;
    background-color: transparent;
    margin: 0;
    vertical-align: top;
}
.ui.avatar.image, .ui.avatar.image img, .ui.avatar.image svg, .ui.avatar.images .image, .ui.avatar.images img, .ui.avatar.images svg {
    margin-right: 0.25em;
    display: inline-block;
    width: 2em;
    height: 2em;
    border-radius: 500rem;
}
.ui.list .list>.item>img.image+.content, .ui.list>.item>img.image+.content {
    display: inline-block;
    width: auto;
}
.ui.list .list>.item>.icon+.content, .ui.list .list>.item>.image+.content, .ui.list>.item>.icon+.content, .ui.list>.item>.image+.content {
    display: table-cell;
    width: 100%;
    padding: 0 0 0 0.5em;
    vertical-align: top;
}
.ui.list .list>.item>.content, .ui.list>.item>.content {
    line-height: 1.14285714em;
}
.ui.list .list>.item a.header, .ui.list>.item a.header {
    cursor: pointer;
    color: #4183c4!important;
}
.ui.list .list>.item .header, .ui.list>.item .header {
    display: block;
    margin: 0;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    font-weight: 700;
    color: rgba(0,0,0,.87);
}
.ui.list .list>.item a, .ui.list>.item a {
    cursor: pointer;
}
.ui.horizontal.list>.item {
    display: inline-block;
    margin-left: 1em;
    font-size: 1rem;
}
.ui.horizontal.list .list>.item, .ui.horizontal.list>.item {
    font-size: 1rem;
}
.ui.link.list .item, .ui.link.list .item a:not(.ui), .ui.link.list a.item {
    color: rgba(0,0,0,.4);
    -webkit-transition: .1s color ease;
    transition: .1s color ease;
}
.ui.mini.horizontal.list .list>.item, .ui.mini.horizontal.list>.item {
    font-size: .78571429rem;
}
.ui.list .list>.item:last-child, .ui.list>.item:last-child, ol.ui.list li:last-child, ul.ui.list li:last-child {
    padding-bottom: 0;
}
.ui.list .list>.item, .ui.list>.item, ol.ui.list li, ul.ui.list li {
    display: list-item;
    table-layout: fixed;
    list-style-type: none;
    list-style-position: outside;
    padding: 0.21428571em 0;
    line-height: 1.14285714em;
}
.ui.horizontal.list>.item>i.icon {
    margin: 0;
    padding: 0 0.25em 0 0;
}
.ui.list .list>.item>i.icon:only-child, .ui.list>.item>i.icon:only-child {
    display: inline-block;
    vertical-align: top;
}
.ui.horizontal.list>.item>.icon, .ui.horizontal.list>.item>.icon+.content {
    float: none;
    display: inline-block;
}
.ui.horizontal.list .list>.item>.content, .ui.horizontal.list .list>.item>.icon, .ui.horizontal.list .list>.item>.image, .ui.horizontal.list>.item>.content, .ui.horizontal.list>.item>.icon, .ui.horizontal.list>.item>.image {
    vertical-align: middle;
}
.ui.list .list>.item>i.icon, .ui.list>.item>i.icon {
    display: table-cell;
    margin: 0;
    padding-top: 0;
    padding-right: 0.28571429em;
    vertical-align: top;
    -webkit-transition: color .1s ease;
    transition: color .1s ease;
}
i.icon.outline {
    font-family: outline-icons;
}
i.icon, i.icons {
    font-size: 1em;
}
i.icon {
    display: inline-block;
    opacity: 1;
    margin: 0 0.25rem 0 0;
    width: 1.18em;
    height: 1em;
    font-family: Icons;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    text-align: center;
    speak: none;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
i {
    font-style: italic;
}
.ui.grid>.row>[class*="right aligned"].column.column, .ui.grid>[class*="right aligned"].column.column, .ui.grid>[class*="right aligned"].row>.column, .ui[class*="right aligned"].grid>.column, .ui[class*="right aligned"].grid>.row>.column {
    text-align: right;
    -ms-flex-item-align: inherit;
    align-self: inherit;
}
.ui.basic.label {
    background: none #fff;
    border: 1px solid rgba(34,36,38,.15);
    color: rgba(0,0,0,.87);
    -webkit-box-shadow: none;
    box-shadow: none;
}
.ui.label:last-child {
    margin-right: 0;
}
.ui.label:first-child {
    margin-left: 0;
}
a.ui.label {
    cursor: pointer;
}
.ui.label, .ui.labels .label {
    font-size: .85714286rem;
}
.ui.label {
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
    margin: 0 0.14285714em;
    background-color: #e8e8e8;
    background-image: none;
    padding: 0.5833em 0.833em;
    color: rgba(0,0,0,.6);
    text-transform: none;
    font-weight: 700;
    border: 0 solid transparent;
    border-radius: 0.28571429rem;
    -webkit-transition: background .1s ease;
    transition: background .1s ease;
}
.m-text, .m-text-thin {
    font-weight: 300!important;
}
.my-blue {
    color: #1685a9!important;
}
.m-padded-tiny {
    padding: 0.3em!important;
}
.ui.column.grid>[class*="five wide"].column, .ui.grid>.column.row>[class*="five wide"].column, .ui.grid>.row>[class*="five wide"].column, .ui.grid>[class*="five wide"].column {
    width: 31.25%!important;
}
a {
    color: #4183c4;
    text-decoration: none;
}
a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
.ui.grid>.column:not(.row), .ui.grid>.row>.column {
    position: relative;
    display: inline-block;
    width: 6.25%;
    padding-left: 1rem;
    padding-right: 1rem;
    vertical-align: top;
}
.ui.grid>* {
    padding-left: 1rem;
    padding-right: 1rem;
}
.ui.grid>.row>[class*="middle aligned"].column, .ui.grid>[class*="middle aligned"].column:not(.row), .ui.grid>[class*="middle aligned"].row>.column, .ui[class*="middle aligned"].grid>.column:not(.row), .ui[class*="middle aligned"].grid>.row>.column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    vertical-align: middle;
    -ms-flex-item-align: center!important;
    align-self: center!important;
}
.ui.rounded.image, .ui.rounded.image>*, .ui.rounded.images .image, .ui.rounded.images .image>* {
    border-radius: 0.3125em;
}
img.ui.image {
    display: block;
}
.ui.image {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    background-color: transparent;
}
.typo fieldset, img {
    border: 0;
}
img {
    border-style: none;
}
.ui.attached:not(.message)+.ui.attached.segment:not(.top) {
    border-top: none;
}
.ui.segment[class*="bottom attached"]:last-child {
    margin-bottom: 0;
}
.ui.segment[class*="bottom attached"] {
    bottom: 0;
    margin-top: 0;
    top: 0;
    margin-bottom: 1rem;
    -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15),none;
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15),none;
    border-radius: 0 0 0.28571429rem 0.28571429rem;
}
.ui.attached.segment {
    top: 0;
    bottom: 0;
    border-radius: 0;
    margin: 0 -1px;
    width: calc(100% - (-1px * 2));
    max-width: calc(100% - (-1px * 2));
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #d4d4d5;
}
.ui.segment:last-child {
    margin-bottom: 0;
}
.ui.segment:first-child {
    margin-top: 0;
}
.ui.segment {
    position: relative;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
    box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
    margin: 1rem 0;
    padding: 1em 1em;
    border-radius: 0.28571429rem;
    border: 1px solid rgba(34,36,38,.15);
}
.el-pagination, .el-table {
    margin-top: 15px;
}
.el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
}

.ui.grid>.column:not(.row) {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.ui.segments:first-child {
    margin-top: 0;
}
.ui.segments {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    margin: 1rem 0;
    border: 1px solid rgba(34,36,38,.15);
    -webkit-box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
    box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
    border-radius: 0.28571429rem;
}
.my-shadow {
    background: #fff!important;
    color: #4c4948;
    border-radius: 8px!important;
    box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)!important;
    transition: all .3s;
}
*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.ui.segments:not(.horizontal)>.segment:first-child {
    border-top: none;
    margin-top: 0;
    bottom: 0;
    margin-bottom: 0;
    top: 0;
    border-radius: 0.28571429rem 0.28571429rem 0 0;
}
.ui.segment, .ui.segments .segment {
    font-size: 1rem;
}
.ui.secondary.segment {
    background: #f3f4f5;
    color: rgba(0,0,0,.6);
}
.ui.segments>.segment {
    top: 0;
    bottom: 0;
    border-radius: 0;
    margin: 0;
    width: auto;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-top: 1px solid rgba(34,36,38,.15);
}
div {
    display: block;
}
.ui.menu:last-child {
    margin-bottom: 0;
}
.ui.menu:first-child {
    margin-top: 0;
}
.ui.menu {
    font-size: 1rem;
}
.ui.menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem 0;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    background: #fff;
    font-weight: 400;
    border: 1px solid rgba(34,36,38,.15);
    -webkit-box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
    box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
    border-radius: 0.28571429rem;
    min-height: 2.85714286em;
}
.m-margin-top-large {
    margin-top: 2em!important;
}
</style>
